<template>
    <div class="base-node" :class="{'multiline':isMultiline}">
        <div class="head">
            <div class="key">
                <slot name="key">
                    <span>{{ pname }}</span>
                </slot>
            </div>
            <span class="Separate">:</span>
            <div class="begin">
                <slot name="begin"></slot>
            </div>
        </div>
        <div class="content">
            <slot></slot>
        </div>
        <div class="end">
            <slot name="end"></slot>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component
export default class BaseNode extends Vue {
    /** 多行 */
    @Prop() private multiline!: boolean;
    @Prop() public pname!: string;

    public get isMultiline() {
        return this.multiline == true;
    }
}
</script>

<style lang="less">
.base-node {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;

    margin: 4px 0;

    > .head {
        flex-shrink: 0;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;

        > .key {
            color: rgb(156, 0, 177);
        }
        > .Separate {
            opacity: 0.5;
            margin: 0 3px;
        }
    }
    > .content {
        flex-shrink: 1;
    }
    > .end {
        align-self: flex-end;
        flex-shrink: 0;
    }

    // 纵向
    &.multiline {
        flex-direction: column;
        // > .head {
        // }
        > .content {
            margin-left: 24px;
        }
        > .end {
            align-self: flex-start;
        }
    }
}
</style>
